<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  background-image: url('@/images/bg/login_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;

  .login-item {
    width: 300px;
    height: 250px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
  }
}
</style>

<template>
  <div class="login">
    <img src="@/images/logo.png" height="90" alt="" />
    <div class="login-item" style="z-index: 20">
      <h2 style="text-align: center; margin-bottom: 20px">登录</h2>
      <el-form :model="formData">
        <el-form-item prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input v-model="formData.pwd" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" size="large" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
      <p style="position: relative; bottom: -35px; font-size: 12px; color: #fff">
        <span @click="router.push('/forget1')">忘记密码</span>
        <span style="float: right; font-weight: 800" @click="router.push('/register')"><span
            style="font-weight: 100">暂无账号?</span>立即注册</span>
      </p>
    </div>
    <div></div>
    <div></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { request } from '../../axios/request'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { JSEncrypt } from 'jsencrypt'
import { userStore } from '../../stores/user'
const user = userStore()
const router = useRouter()

// 表单数据
const formData = ref({
  email: '1815540661@qq.com',
  pwd: ''
})

// 提交表单
const onSubmit = async () => {
  const crypt = new JSEncrypt()
  const publicKey =
    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB'
  crypt.setPublicKey(publicKey)
  const newPwd = ref(crypt.encrypt(formData.value.pwd))
  console.log(newPwd.value)
  await request.post('/api/health/user/v1/login', {
    email: formData.value.email,
    pwd: newPwd.value
  }, {
    headers: {
      ...formData.value,
      "Content-Type": "application/x-www-form-urlencoded",
    },
  }).then(res => {
    let { status, message, result } = res.data
    if (status === '0000') {
      ElMessage.success('登录成功')
      user.sex = result.sex === '1' ? '男' : '女'
      localStorage.setItem('result', JSON.stringify(result))
      localStorage.setItem('userId', JSON.stringify(result.userId))
      localStorage.setItem('sessionId', JSON.stringify(result.sessionId))
      router.push('/home')
    } else {
      ElMessage.error(message)
    }
  })
}
</script>